import React from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import ToggleNavGroup from "../../components/ToggleNavGroup"
import {productDataSource} from '../../http/api'
import ListItem from '../../components/ListItem'
import storage from '../../utils/storage'
const {BuyItem,SupplyItem,ListEmpty} = ListItem

export default class CompanyIndex extends React.Component{
        constructor (props) {
                super (props);
                this.state ={
                        productType:0,
                        companyData:{}
                }
                this.dataSource = []
        }
        componentWillMount () {
                this.setState({...storage.get('currentClickItemActive')})
                this.getDataSource()
        }
        componentWillUnmount () {
                storage.set('currentClickItemActive',{})
        }

        getDataSource = ()=>{
                const {memberId} = this.props.match.params
                const {productType} = this.state
                productDataSource({
                        orderType:1,
                        offset:0,
                        memberId,
                        productType:productType+1,
                        rows:100}).then(res=>{
                                const {list} = res
                                this.dataSource = list
                                this.setState({productType})
                        }
                )
        }
        handleToggleNavActive = productType=>{
                this.setState({productType:productType},this.getDataSource)
        }
        render () {
                const {productType,iconUrl,identityStatus,merchantName,type} = this.state
                const renderItems = [
                        this.dataSource.map((item,index)=><SupplyItem key={index} dataSource={item}/>),
                        this.dataSource.map((item,index)=><BuyItem key={index} dataSource={item}/>)
                ][productType]
                const identity = [
                        <span className="tag">未验证</span>,
                        <span className='tag'>验证中</span>,
                        <span className="tag">已验证</span>
                ][identityStatus]
                const companyTypeText = [
                        '',
                        <span className="tag">个人</span>,
                        <span className="tag">企业</span>
                ][type]
                return <ContentView className='company-index'>
                        <ScrollContent>
                                <div className='page-main'>
                                        <div className="header">
                                                <div className="header-block">
                                                        <div className="logo">
                                                                <img src={iconUrl} alt=""/>
                                                        </div>
                                                        <div className="line-wrapper">
                                                                <div className="line">{merchantName}</div>
                                                                <div className="line">
                                                                        {identity}
                                                                        {companyTypeText}
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                        <div className="content">
                                                <ToggleNavGroup onClick={this.handleToggleNavActive}/>
                                                {renderItems.length?renderItems:<ListEmpty/>}
                                        </div>
                                </div>
                        </ScrollContent>
                </ContentView>
        }

}
